<template>
  <div>
    <div class="ibox-content no-border no-padding-bottom">
      <!--搜索栏-->
      <el-col class="toolbar">
        <el-form :inline="true" :model="filterForm" label-position="top" size="small" label-width="100px" ref="filterForm">
          <el-form-item label="id">
            <el-input style="width: 178px" v-model="filterForm.id" placeholder="id"></el-input>
          </el-form-item>
          <el-form-item label="页面">
            <el-select style="width: 178px" v-model="filterForm.is_vip" placeholder="页面">
              <el-option label="全部" value=""></el-option>
              <el-option :label="item" :value="key" :key="index"
                         v-for="(item,key,index) in selectOptions.vip_status"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置">
            <el-select style="width: 178px" v-model="filterForm.is_vip" placeholder="位置">
              <el-option label="全部" value=""></el-option>
              <el-option :label="item" :value="key" :key="index"
                         v-for="(item,key,index) in selectOptions.vip_status"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指向">
            <el-select style="width: 178px" v-model="filterForm.is_vip" placeholder="指向">
              <el-option label="全部" value=""></el-option>
              <el-option :label="item" :value="key" :key="index"
                         v-for="(item,key,index) in selectOptions.vip_status"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select style="width: 178px" v-model="filterForm.is_vip" placeholder="状态">
              <el-option label="全部" value=""></el-option>
              <el-option :label="item" :value="key" :key="index"
                         v-for="(item,key,index) in selectOptions.vip_status"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top: 30px">
            <el-button @click="filterClick" type="primary">查询</el-button>
            <el-button @click="resetFilterForm('filterForm')">重置</el-button>
          </el-form-item>
          <div class="hr-line-dashed"></div>
          <br/>
          <el-form-item size="small">
            <el-button @click="addProduct" type="primary" plain icon="el-icon-plus">添加Banner</el-button>
            <el-button @click="multiplDelete" type="danger" plain icon="el-icon-delete">删除Banner</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>

    <div class="ibox-content">
      <!--表格-->
      <el-table
        ref="multipleTable"
        :data="arrList"
        size="medium"
        border
        highlight-current-row
        tooltip-effect="dark"
        style="width: 100%"
        :max-height="500"
        v-loading="tableLoading"
      >
        <el-table-column prop="id" label="订单编号" width="80"></el-table-column>
        <el-table-column prop="phone" label="图片"></el-table-column>
        <el-table-column prop="client" label="排序" width="80"></el-table-column>
        <el-table-column prop="channel_name" label="页面"></el-table-column>
        <el-table-column prop="market" label="位置" width="100"></el-table-column>
        <el-table-column prop="real_name" label="指向"></el-table-column>
        <el-table-column prop="id_card" label="指向值"></el-table-column>
        <el-table-column prop="real_name" label="起始时间"></el-table-column>
        <el-table-column prop="id_card" label="结束时间"></el-table-column>
        <el-table-column prop="gender" label="状态" width="80">
          <template slot-scope="scope">
            <span class="warning" v-show="scope.row.gender==0">未填写</span>
            <span class="" v-show="scope.row.gender==1">男</span>
            <span class="" v-show="scope.row.gender==2">女</span>
          </template>
        </el-table-column>
      </el-table>

      <!--分页工具条-->
      <div v-show="arrList.length>0" style="margin-top: 18px;text-align: center">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currPage"
          :page-sizes="[20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.totalCount">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Banner",
    data() {
      return {
        arrList: [],
        pageInfo: {
          totalPage: 0,// 总页数
          totalCount: 0,// 总条数
          pageSize: 0,// 每页条数
          currPage: 1// 当前页
        },
        filterForm: {},
        tableLoading: false,
        tableSelectData: [],
        selectOptions: {},
        chooseTime: ''
      }
    }
  }
</script>

<style scoped>

</style>
